<template>
  <div>
    <h1>Vue基本的语法---html模版({{  }}+指令)</h1>

    <h2>{{str}}</h2>
    <h2>Num的值是：{{num}}</h2>
    <h2>学生的姓名是：{{studentNames}}</h2>
    <h2>人的信息：{{peoson}}</h2>
    <h3>sdfsadfsdfsdfsfsfd</h3>
    <h3>sfdsfwefdsf</h3>
    <h3>fbgewgcvas</h3>
    <input type="button" value="改变num的值" @click="chageNum"/>
  </div>
</template>

<script setup lang="ts">
//在Vue先要声明相应式数据   --作用
import {reactive,toRefs} from 'vue'


//数据
let data:any = reactive({
  str:'Hello Word',
  num:100,
  studentNames:["张三","李四","王五"],
  peoson:{
    name:'张三',
    age:20,
    sex:'男'
  }
})
let {str,num,studentNames,peoson}=toRefs(data)
//函数
const chageNum =()=>{
  //console.log("我被调用了！！！");
  num.value++;

}
</script>

<style scoped>

</style>
